<template>
    <div>
        <div class="form-container">
            <el-form :model="formData" ref="form" label-width="100px">
                <el-form-item label="客户编码">
                    <el-input v-model="customerCode" placeholder="请输入客户编码"></el-input>
                </el-form-item>
                <el-form-item label="客户名称">
                    <el-input v-model="customerName" placeholder="请输入客户名称"></el-input>
                </el-form-item>
                <el-form-item label="客户简称">
                    <el-input v-model="customerShortName" placeholder="请输入客户简称"></el-input>
                </el-form-item>
                <el-form-item label="客户英文名称">
                    <el-input v-model="customerEnglishName" placeholder="请输入客户英文名称"></el-input>
                </el-form-item>
                <el-form-item label="客户类型">
                    <el-select v-model="customerType" placeholder="请选择客户类型">
                        <el-option label="类型1" value="1"></el-option>
                        <el-option label="类型2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户简介">
                    <el-input type="textarea" v-model="customerIntro" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="客户地址">
                    <el-input v-model="customerAddress" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="客户官网地址">
                    <el-input v-model="customerWebsite" placeholder="请输入客户官网地址"></el-input>
                </el-form-item>
                <el-form-item label="客户电话">
                    <el-input v-model="customerPhone" placeholder="请输入客户电话"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="customerEmail" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input v-model="mobile" placeholder="请输入联系人电话"></el-input>
                </el-form-item>
                <el-form-item label="业务员">
                    <el-input v-model="salesman" placeholder="请输入业务员"></el-input>
                </el-form-item>
                <el-form-item label="跟单">
                    <el-input v-model="follower" placeholder="请输入跟单"></el-input>
                </el-form-item>
                <el-form-item label="结账方式">
                    <el-select v-model="paymentMethod" placeholder="请选择结账方式">
                        <el-option label="方式1" value="1"></el-option>
                        <el-option label="方式2" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="币别">
                    <el-select v-model="currency" placeholder="请选择币别">
                        <el-option label="人民币" value="CNY"></el-option>
                        <el-option label="美元" value="USD"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="社会信用代码">
                    <el-input v-model="socialCreditCode" placeholder="请输入社会信用代码"></el-input>
                </el-form-item>
                <el-form-item label="是否有效">
                    <el-radio v-model="isValid" label="1">是</el-radio>
                    <el-radio v-model="isValid" label="2">否</el-radio>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="remarks" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即修改</el-button>
                    <el-button @click="close">关闭</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang='scss' scoped>
/* 基本样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
}

/* 表单容器 */
.form-container {
    width: 600px;
    /* 根据需要调整宽度 */
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 表单标签 */
.el-form-item__label {
    font-size: 14px;
    /* 标签大小 */
    color: #333;
    /* 标签颜色 */
    font-weight: 500;
    /* 标签字重 */
}

/* 输入框样式 */
.el-input,
.el-select .el-select__inner {
    height: 40px;
    /* 输入框高度 */
    font-size: 14px;
    /* 输入框文本大小 */
    border-radius: 4px;
    /* 圆角 */
    border: 1px solid #dcdfe6;
    /* 边框颜色 */
}

/* 输入框聚焦样式 */
.el-input:focus,
.el-select .el-select__inner:focus {
    border-color: #409eff;
    /* 聚焦边框颜色 */
    box-shadow: 0 0 5px rgba(64, 158, 255, 0.4);
    /* 聚焦阴影 */
}

/* 文本区域样式 */
.el-input[type="textarea"] {
    resize: none;
    /* 禁用文本区域的调整大小 */
}

/* 按钮样式 */
.el-button {
    margin-right: 10px;
    /* 按钮间距 */
}

/* 单选框和下拉选择框对齐 */
.el-radio,
.el-select {
    vertical-align: middle;
    /* 垂直对齐 */
}

/* 自定义开关样式 */
.el-switch {
    margin-left: 10px;
    /* 标签与开关之间的空隙 */
}

/* 响应式设计 */
@media (max-width: 600px) {
    .form-container {
        width: 100%;
        /* 容器在小屏幕上占满宽度 */
        padding: 10px;
        /* 减少内边距 */
    }

    .el-form-item__label {
        font-size: 12px;
        /* 小屏幕标签大小 */
    }

    .el-input,
    .el-select .el-select__inner {
        font-size: 12px;
        /* 小屏幕输入框大小 */
    }
}
</style>
